<template>
  <h3>当前Num的值:{{ num }}</h3>
  <button @click="num++">Num ++ </button>
  <hr>
  <h3>{{ person }}</h3>
  <h3> toRaw :{{ rawPerson }}</h3>
  <br>
  <h3>当前Person中name的值:{{ person.name }}</h3>
  <button @click="person.name += '~'">Name 后加个 ~ </button>
  <h3>当前Person中age的值:{{ person.age }}</h3>
  <button @click="person.age++">年龄 ++ </button>
  <h3>当前Person-job-job1的salary值:{{ person.job.job1.salary }}K</h3>
  <button @click="person.job.job1.salary++">job1涨薪</button>

  <br>
  <br>
  <h3 v-show="person.car">当前Person的car值:{{ person.car }}</h3>
  <button @click="arrCar">动态给人一个car</button>
  <button @click="person.car.price++">修改car价格(markRaw标记后，不能修改)</button>
</template>

<script>
import { ref, reactive, toRaw, markRaw, } from 'vue'

export default {
  name: 'School-Comp',
  setup() {
    let num = ref(0);
    // 数据
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        job1: {
          salary: 10,
        }
      }
    });
    console.log("person :", person);

    let rawPerson = toRaw(person);

    console.log("rawPerson :", rawPerson);

    let car = markRaw({
      "name": "奔驰",
      "price": 100,
    });

    function arrCar() {
      person.car = car;
    }

    return {
      num,
      person,
      rawPerson,
      arrCar
    }
  },
}
</script>

<style></style>

